<!-- 已发货详情页面 -->
<template>
  <div class="wait-send-detail">
    <el-dialog
      title="已发货详情"
      :visible.sync="dialogVisible"
      top="5%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template slot="title">
        <span style="color: rgba(52, 69, 99, 1); font-size: 18px;font-weight: bold; margin-left: 5px;">订单详情</span>
      </template>
      <el-container style="height: 60%;background-color: white;width:100% ;padding: none;">
        <div style="margin-left: 5px;width: 100%;height: 35rem;overflow-y: auto;">
          <!-- 已发货详情页面内容 -->
          <div style="width: 100%">
            <div class="order-info-title">订单信息</div>
            <div class="order-info">
              <el-divider
                direction="horizontal"
                style="left: 474px;
                        top: 237.5px;
                        width: 1002px;
                        height: 0px;
                        opacity: 1;
                        border: 1px solid rgba(235, 238, 242, 1);"
              ></el-divider>
              <div style="display: flex;margin-top: 24.5px;">
                <div
                  class="ziti"
                  style="display: flex;margin-left: 21px;"
                >订单编号：<div>
                    {{ tableData.orderNumber }}</div>
                </div>
                <div
                  class="ziti"
                  style="display: flex;margin-left:240px ;"
                >订单时间：<div>{{time}}</div>
                </div>
              </div>
              <div>
                <div class="product-info-title">商品信息</div>
                <el-divider
                  direction="horizontal"
                  style="left: 474px;
                        top: 237.5px;
                        width: 1002px;
                        height: 0px;
                        opacity: 1;
                        border: 1px solid rgba(235, 238, 242, 1);"
                ></el-divider>
                <div style="margin-right: 15px;color: black;width: 90%;margin-top: 22px;">

                  <ProductInfoTable v-if="tableData.listProductOrderInfos.length>0" :infodetail="info" :data="tableData.listProductOrderInfos" :price="tableData.orderAmount"></ProductInfoTable>
                  <div
                    v-else
                    style=" margin-left: 28px; margin-top: 22px;color: rgba(52, 69, 99, 1);font-size: 14px;"
                  >暂无商品信息</div>
                </div>

              </div>

              <div style="color: rgba(52, 69, 99, 1); font-size: 16px;margin-top: 29px; letter-spacing: 2px;font-weight: bold;margin-bottom: 12.5px;">
                备注：</div>
              <el-divider
                direction="horizontal"
                style="left: 474px;
                        top: 237.5px;
                        width: 1002px;
                        height: 0px;
                        opacity: 1;
                        border: 1px solid rgba(235, 238, 242, 1);"
              ></el-divider>
              <div v-if="tableData.remark!==null" style="margin-left: 28px;font-size: 14px;color: rgba(52, 69, 99, 1);margin-top: 12.5px;">{{ tableData.remark }}</div>
              <div v-else style="margin-left: 28px;font-size: 14px;color: rgba(52, 69, 99, 1);margin-top: 12.5px;">暂无备注信息</div>
            </div>

            <MessageDeatil :message.sync="tableData"></MessageDeatil>

          </div>
        </div>

      </el-container>

    </el-dialog>
  </div>
</template>

<script>
import MessageDeatil from "./MessageDeatil.vue";
import ProductInfoTable from "./ProductInfoTable.vue";
export default {
  components: {
    ProductInfoTable,
    MessageDeatil,
  },
  name: "AlreadySendDetail",

  data() {
    return {
      // 待发货详情页面数据
      tableData: this.data,
      value: 12345,
      // orderNo: "20210101001",
      orderTime: "20210101120000",
      value1: 5,
      message: "/",
      imgList: [
        { url: require("../../../assets/order/美食1.png") },
        { url: require("../../../assets/order/美食2.png") },
        { url: require("../../../assets/order/美食3.png") },
      ],
      postdata: '',
      reverse: true,
      click: true,
      info: [],
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    time: {
      type: String,
      default: "",
    },
    data: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    showDialog: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("closeDialog", val);
      },
    },
  },
  watch: {
    setOrderNO: {
      get() {
        return this.orderNo;
      },
      set(val) {
        this.orderNo = val;
      },
    },
    data: {
      handler(val) {
        this.tableData = val;
      },
      deep: true,
    },
    time: {
      handler(val) {
        this.orderTime = val;
      },
      deep: true,
    },
  },
  async created() {
    this.getInfo(this.data.listProductOrderInfos)
    this.getLogisticsDetails();
  },
  methods: {
    //绑定icon
    bindicon(icon) {
      console.log(icon);
      var icon5 = "";
      if (icon === "post") {
        icon5 = "el-icon-box";
      } else if (icon === "delivery") {
        icon5 = "el-icon-truck";
      } else {
        icon5 = "el-icon-document-checked";
      }
      return icon5;
    },
    //绑定颜色
    bindcolor(color) {
      if (color === "post") {
        return "rgba(191, 202, 222, 1)";
      } else if (color === "delivery") {
        return "rgba(191, 202, 222, 1)";
      } else {
        return "rgba(255, 87, 51, 1)";
      }
    },
    // 返回上一页
    goBack() {
      //   this.$router.go(-1);
      console.log("返回上一页");
    },
    // 获取物流详情数据
    getLogisticsDetails() {},
    change(data) {
      this.click = data;
    },
    // 获已发货详情页面数据
    async getDetailData() {
      const res = this.data;
      this.postdata = res;
    },
    // // 点击发货按钮
    // handleSend() {
    //   console.log("发货");
    // },
    // // 点击修改收货信息按钮
    // handleEdit() {
    //   console.log("修改收货信息");
    // },
    // // 点击取消按钮
    // handleCancel() {
    //   console.log("取消");
    // },
    //点击close按钮
    handleClose() {
      this.$emit("closeDialog", false);
      // this.$emit("close");
    },
     //获取并且将详情转化为JSON格式
     getInfo(data){
      for(let i=0;i<data.length;i++){
        this.info.push(JSON.parse(data[i].spData))
      }
    },
  },
};
</script>

<style scoped>
/* 待发货详情页面样式 */

.footer {
  position: fixed;
  bottom: 0;
  width: 78%;
  line-height: 40px;
  text-align: right;
  color: #fff;
  margin-left: 0.4%;
  padding: 1.3rem;
}

.wait-send-detail {
  background-color: white;
  width: 100%;
  height: 100%;
  /* margin-left: 17%; */
}
.product-info-title {
  left: 474px;
  top: 312px;
  width: 64px;
  height: 23px;
  opacity: 1;
  /** 文本1 */
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 22.4px;
  color: rgba(52, 69, 99, 1);
  text-align: left;
  vertical-align: top;
  margin-top: 30px;
}
.detail-info {
  left: 474px;
  top: 1805px;
  width: 1002px;
  height: 505px;
  opacity: 1;
  background: rgba(247, 249, 252, 1);
  /* padding: 18px 29px; */
  margin-top: 30px;
}
.ziti {
  /* font-size: 14px; letter-spacing: 1px;color: rgba(52, 69, 99, 1); display: flex; */
  left: 496px;
  top: 262px;
  /* width: 188px; */
  height: 20px;
  opacity: 1;
  /** 文本1 */
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 19.6px;
  color: rgba(52, 69, 99, 1);
  text-align: left;
  vertical-align: top;
  /* margin-top: 30px; */
}
.divider {
  left: 474px;
  top: 347.5px;
  width: 1002px;
  height: 0px;
  opacity: 1;
  border: 1px solid rgba(235, 238, 242, 1);
}
.order-info-title {
  left: 474px;
  top: 202px;
  width: 64px;
  height: 23px;
  opacity: 1;
  /** 文本1 */
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 22.4px;
  color: rgba(52, 69, 99, 1);
  text-align: left;
  vertical-align: top;

  /* margin-left: 1.3rem; */
}

.order-info {
  /* margin-left: 1.3rem; */
  color: black;
}

.el-header {
  background-color: white;
  height: 1.3rem;
  color: #333;
  text-align: left;
}

.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 1002px;
  margin-top: 12.5px;
  margin-bottom: 12.5px;
  /* margin: 24px 0; */
}
.margintop {
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 0.99rem;
  margin-left: 2%;
}
.el-dialog__footer {
  /* padding: 10px 20px 20px; */
  text-align: right;
  box-sizing: border-box;
}

body > .el-container {
  margin-bottom: 2.9rem;
}
.el-button--purple {
  background-color: #722ed1;
  /* 紫色背景 */
  border-color: #722ed1;
  /* 紫色边框 */
  color: #fff;
  /* 白色文字 */
}
.dialog-footer {
  background: rgba(247, 249, 252, 1) !important;
  margin-right: 1rem;
  height: 5rem;
  margin-left: none;
  width: 100%;
}
.el-dialog__footer {
  /* padding: 10px 20px 20px; */
  text-align: right;
  box-sizing: border-box;
  /* margin-bottom: 10rem; */
}
.el-container {
  /* width: 100vw; */
  height: 100vh;
  background-color: rgba(247, 249, 250, 1);
}
</style>